<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="roleName" v-if="path == 'add'">
        <el-input type="text" v-model="ruleForm.roleName" autocomplete="off" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色权限设置" prop="menuList">
        <el-tree :data="menus" show-checkbox node-key="id" ref="tree" default-expand-all highlight-current
          :props="defaultProps">
        </el-tree>
      </el-form-item>
      <!-- submitForm('ruleForm') -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="handleClose('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
  // components
  import Loading from '@/components/Loading/index'
  import {
    mapGetters
  } from 'vuex'
  // api
  import {
    getMenus,
    addRolePermissions,
    getRoleMenus,
    editMenus,
  } from '@/api/setting'

  export default {
    components: {
      Loading
    },
    props: {
      visible: Boolean,
      id: String,
      path: String,
    },
    data() {
      return {
        title: '新增角色',
        roleList: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        ruleForm: {
          roleName: '',
          menuList: [],
        },
        rules: {
          roleName: [{
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }],
          menuList: [{
            required: true,
            message: '请选择角色权限',
            trigger: 'blur'
          }],
        }
      }
    },
    computed: {
      ...mapGetters(
        ['menus']
      )
    },
    created() {
      console.log('this.path', this.$store.state.settings.menus)
      if (this.path == 'edit') {
        this.getdetail()
        this.title = '编辑角色'
      }
    },
    methods: {
      //获取详情
      getdetail() {
        const id = this.id
        const that = this
        getRoleMenus(id).then(res => {
          console.log('获取详情', res)
          res.result.roleMenuList.forEach(item => {
            that.$refs.tree.setChecked(item, true, false);
          });
        }).catch(() => {

        })
      },
      //选择树形结构
      handleTree() {
        // 所有菜单节点数据
        // 目前被选中的菜单节点
        let checkedKeys = this.$refs.tree.getCheckedKeys();
        console.log('checkedKeys', checkedKeys)
        // 半选中的菜单节点
        let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
        console.log('半选中的菜单节点', checkedKeys)
        this.ruleForm.menuList = checkedKeys
      },
      //新建子账号
      submitForm(formName) {
        this.handleTree()
        this.$refs[formName].validate((valid) => {
          console.log('valid', valid)
          if (valid) {
            if (this.path == 'add') {
              var data = {
                ...this.ruleForm
              }
              addRolePermissions(data).then(res => {
                this.handleSuccess("创建成功")
              }).finally(() => {
                this.loading = false
              })
            } else if (this.path == 'edit') {
              var data = {
                id: this.id,
                menuList: this.ruleForm.menuList
              }
              editMenus(data).then(res => {
                this.handleSuccess("创建成功")
              }).finally(() => {
                this.loading = false
              })
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

      //取消
      handleClose(formName) {
        this.$emit('update:visible', false)
        // this.$refs[formName].resetFields();
      },
      //确认
      handleConfirm() {
        this.$emit('success', '你好')
      },
      handleSuccess(msg) {
        if (msg === '已拒绝') {
          var type = 'error'
        } else {
          var type = 'success'
        }
        this.$message({
          message: msg,
          type: type,
          duration: 1500,
          onClose: () => {
            this.handleClose()
            this.$emit('success')
          }
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

</style>
